const ArrayImg = [
    './imgs/不知火舞_绯月行.jpg',
    './imgs/安琪拉_魔法小厨娘.jpg',
    './imgs/不知火舞_魅语.jpg',
    './imgs/蔡文姬_花朝如约.jpg',
    './imgs/蔡文姬_天籁弦音.jpg',

];
const cur = document.querySelector('.scroll_box .cur');
const prev = document.querySelector('.scroll_box .prev');
const next = document.querySelector('.scroll_box .next');
const scroll_box = document.querySelector('.scroll_box');
let cur_id = +cur.dataset.id;
let IsTransition = false;

function CreateScroll_Img(cur_id) {
    const prev_id = cur_id === 0 ? ArrayImg.length -1 : cur_id - 1;
    const next_id = cur_id === ArrayImg.length -1 ? 0 : cur_id + 1;
    cur.style.background = `url(${ArrayImg[cur_id]}) no-repeat center/cover`;
    prev.style.background = `url(${ArrayImg[prev_id]}) no-repeat center/cover`;
    next.style.background = `url(${ArrayImg[next_id]}) no-repeat center/cover`;
}
CreateScroll_Img(cur_id);

function scroll_Img(prevOrNext, cur) {
    prevOrNext.style.transition = 'height 1s';
    prevOrNext.style.height = '100vh';
    setTimeout(function () {
        prevOrNext.style.transition = 'none';
        cur.style.background = `url(${ArrayImg[cur_id]}) no-repeat center/cover`;
        prevOrNext.style.height = '0';
        prevOrNext.style.offsetWidth;
        CreateScroll_Img(cur_id);
        IsTransition = false;
    }, 1000);
}

window.addEventListener('wheel', function (e) {
    if (IsTransition === true) return;
    IsTransition = true;
    if (e.deltaY < 0) {
        cur_id--;
        if (cur_id < 0) cur_id = ArrayImg.length - 1;
        scroll_Img(prev, cur);
    }
    if (e.deltaY > 0) {
        cur_id = (cur_id + 1) % ArrayImg.length;
        scroll_Img(next, cur);
    }
});